<template>
	<view>
		<uni-calendar :showMonth="false" @change="change" @monthSwitch="monthSwitch" />

		<view class="recent">
			<view class="recent-header">
				<view class="current-week">
					<text class="text">
						{{currentDay}}
					</text>
				</view>
				<view class="recent-amount">
					<text class="recent-header-text text-in">收入 {{dayIn}}</text>

					<text class="recent-header-text">支出 {{dayOut}}</text>
				</view>
			</view>

			<!-- uni-app -->
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="list-item" v-for="i in detailList">
					<view class="list-item-content">
						<uni-icons fontFamily="CustomFont" :size="35">{{i.iconName||'\ue797'}}</uni-icons>
						<view class="view">
							<view>{{i.categoryName}}</view>
							<view>{{i.newDate}}</view>
						</view>
					</view>
					{{i.money}}
					<view class="view">
						<view :class="moneyClass(i.money)">{{( i.money.includes('-')? '':'+') + i.money}}</view>
						<view>{{i.remarks}}</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="save-btn" @click="goto">
			<text class="save-btn-text">记一笔</text>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { calendarApi, accountBookApi } from "@/apis/apis"
	import { onShow } from '@dcloudio/uni-app'
	import { getDate } from '@/utils/index'

	const currentDay = ref(getDate())
	const dayIn = ref(0)
	const dayOut = ref(0)
	const defaultAccunt = {
		accountBookName: '',
		accountBookId: ''
	}
	const moneyClass = (money : string) => money.includes('-') ? 'green' : 'red'
	// 初始化 
	const getAccountBook = async () => {
		const res : any = await accountBookApi.queryPageUsingPOST({ defaulted: '1' })
		if (res.data.records[0]) {
			defaultAccunt.accountBookName = res.data.records[0].name
			defaultAccunt.accountBookId = res.data.records[0].id
			getCurrentDetail()
		}
	}

	const detailList = ref([
		/* {
			categoryName: '微信收款',
			money: '+10.00',
			icon: 'wallet',
			newDate: '2025年3月9日',
			type: "储蓄卡",
			remarks: ''
		}, */

	])
	const getCurrentDetail = async () => {
		const res : any = await calendarApi.queryPageUsingGET({ accountBookId: defaultAccunt.accountBookId, date: currentDay.value })
		detailList.value = res.data.records
		detailList.value.forEach(item => {

			try {

				if (item.money.includes('-')) {
					dayOut.value += - -item.money
				} else {
					dayIn.value += - -item.money
				}
			} catch (error) {
				console.log(error);
			}

		})
	}


	onShow(() => {
		getAccountBook()
	})

	const change = (e : any) => {
		console.log('change 返回:', e)
		currentDay.value = e.fulldate
		getCurrentDetail()
	}

	const monthSwitch = (e) => {
		// currentDay.value = e.year + '-' + e.month + '-' + '01'
		console.log('monthSwitchs 返回:', e)
	}
	const goto = () => {
		uni.navigateTo({
			url: '/pages/startKeepingAccounts/startKeepingAccounts'
		})
	}
</script>

<style lang="scss" scoped>
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	// 近一周
	.recent {
		width: 96%;
		height: 250px;
		margin: 10px auto;
		// background-color: #e2ebf0;

		.recent-header {
			padding: 10px 0;
			height: 28px;
			display: flex;
			justify-content: space-between;

			.current-week {
				padding-left: 10px;
				padding-right: 10px;
				height: 28px;

				text-align: center;
				background-color: #000;
				color: rgba(255, 255, 255, 1);
				border-radius: 37px;

				.text {
					line-height: 28px;
				}
			}

			.recent-amount {
				.recent-header-text {
					height: 28px;
					line-height: 28px;
				}

				.text-in {
					margin-right: 20px;
				}
			}
		}

		.scroll-Y {
			height: 280px;
		}

		// 明细列表
		.list-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #c6c6c6;

			.list-item-content {
				display: flex;
				flex-direction: row;
				align-items: center;

				.list-item-content-view {
					margin-left: 10px;
				}
			}
		}
	}
</style>